<template>
    <el-dialog :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="800"
        :close-on-click-modal="false" draggable>
        <el-form :model="dataForm" :rules="dataRules" label-width="120px" ref="dataFormRef" v-loading="loading">
            <el-row :gutter="50">
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basProcess.processCode')" prop="processCode">
                        <el-input clearable :placeholder="$t('basProcess.enterProcessCode')" v-model="dataForm.processCode" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basProcess.processName')" prop="processName">
                        <el-input clearable :placeholder="$t('basProcess.enterProcessName')" v-model="dataForm.processName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basProcess.warehouseName')" prop="warehouseCode">
                        <el-select v-model="value"  :placeholder="$t('basProcess.selectWarehouse')" style="width: 100%" >
                            <el-option v-for="item in options" :key="item.id" :label="item.warehouseName"
                                :value="item.warehouseCode" @click = "onSelect(item)"/>
                        </el-select>

                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false" icon="Close">{{$t('basProcess.cancel')}}</el-button>
                <el-button type="primary" @click="onSubmit" :disabled="loading" icon="Check">{{$t('basProcess.confirm')}}</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue';
import { useMessage } from "/@/hooks/message";
import { createOrEditProcess, getAllWarehouse } from '/@/api/platform/digital/basProcess'
const emit = defineEmits(['refresh']);
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const detail = ref(false);
const options = ref([])
const value = ref('')

onMounted(() => {
    getAllWarehouse().then(res => {
        options.value = res.data

    })
})
// 定义form数据
const form = reactive({
    id: ''
})
const dataForm = reactive({
    processCode: '',
    processName: '',
    warehouseCode: '',
    warehouseId: '',
    warehouseName: '',
    id: ''
})

const onSelect = (data:any) => {
    dataForm.warehouseCode = data.warehouseCode;
    dataForm.warehouseId = data.id;
    dataForm.warehouseName = data.warehouseName;
}

// 定义表单校验规则
const dataRules = reactive({
    processCode: [
        { required: true, message: t('basProcess.enterProcessCode'), trigger: 'blur' },
    ],
    processName: [
        { required: true, message: t('basProcess.enterProcessName'), trigger: 'blur' },
    ],
    warehouseCode: [
        { required: true, message: t('basProcess.selectWarehouse'), trigger: 'blur' },
    ]
})

// 提交
const onSubmit = async () => {
    const valid = await dataFormRef.value.validate().catch(() => {
    });
    if (!valid) return false;

    try {
        loading.value = true;
        await createOrEditProcess(dataForm);
        useMessage().success(dataForm.id ? t('basProcess.editSuccess') : t('basProcess.addSuccess'));
        visible.value = false;
        emit('refresh');
    } catch (err: any) {
        useMessage().error(err.msg);
    } finally {
        loading.value = false;
    }
};

// 打开弹框
const openAddDialog = () => {
    visible.value = true;
    dataForm.id = null
    dataForm.processCode= null
    dataForm.processName= null
    dataForm.warehouseCode= null
    dataForm.warehouseId= null
    dataForm.warehouseName= null
    value.value = null
    dataFormRef.value = null
    // 重置表单数据
    nextTick(() => {
        dataFormRef.value?.resetFields();
    });

};

// 编辑弹框
const openEditDialog = (data: any) => {
    visible.value = true;
    value.value = data.warehouseCode;
    value.key = data.warehouseId;
    value.label = data.warehouseName;
    // 将data中的数据解构到dataForm中
    Object.assign(dataForm, data);
}

// 暴露变量
defineExpose({
    openAddDialog, openEditDialog
});
</script>
